<template>
  <basic-container>
    <div id="communityBuildingList" v-cloak>

      <!--工具条-->
      <div name="searchColums" id="searchColums">
        <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
          <el-form-item class="el-form-item" label="园区名称">
            <el-input v-model="filters.name" name="name" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>

          <span class="bth_search">
            <el-form-item>
              <el-button type="success" icon="el-icon-search" v-on:click="getCommunitys(true)">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
            </el-form-item>
          </span>
        </el-form>
      </div>
      <!--toolbar-->
      <el-row id="toolbar">
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleAdd">新增</el-button>
            <el-button type="primary" size="mini" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-delete">批量删除
            </el-button>

          </div>
        </el-col>
      </el-row>

      <!--列表-->
      <el-table :data="communitys" id="datagrid" empty-text=" " height="410" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="园区名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="园区地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="contactName" label="负责人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="telphone" label="负责人联系方式" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar" id="pageDiv">
        <el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
      </el-col>

      <!--编辑界面-->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="editFormVisible" :close-on-click-modal="false" @close="resetForm('editForm')">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm" size="mini">
          <el-input v-model="editForm.deptId" type="hidden" style="display: none!important;"></el-input>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="园区名称" prop="name">
                <el-input v-model="editForm.name" auto-complete="off" placeholder="请输入园区名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="园区企业数" prop="companyNumber">
                <el-input v-model.number="editForm.companyNumber" auto-complete="off" disabled placeholder="请输入园区面积">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="主要负责人" prop="phone">
                <el-input v-model="editForm.phone" auto-complete="off" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人手机号" prop="telphone">
                <el-input v-model="editForm.telphone" auto-complete="off" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span=24>
            <el-form-item label="地址" prop="address">
              <div style="display:flex">
                <avue-map style="margin-right:10px;width:120px;" v-model="map"></avue-map>
                <el-input v-model="editForm.address" disabled></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button v-if="dialogStatus=='create'" type="primary" @click="addSubmit()" :loading="editLoading">确 定</el-button>
          <el-button v-else type="primary" @click="editSubmit()" :loading="editLoading">修 改</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>
<script>
import { getToken, setToken, removeToken } from '@/util/auth'
import request from '@/router/axios'
import { mapGetters } from 'vuex'
export default {
  name: 'table_community_info',
  data() {
    return {
      filters: {
        name: ''
      },
      url: {
        list: '/admin/community/page',
        del: '/admin/community/doDel',
        batchDel: '/admin/community/doBatchDel',
        save: '/admin/community/doAdd',
        edit: '/admin/community/doUpdate'
      },
      communitys: [],
      total: 0,
      page: 1,
      pageSize: 10,
      sort: {
        sort: 'sort',
        order: 'asc'
      },
      map: {},
      listLoading: false,
      sels: [], //列表选中列
      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      dialogStatus: '',
      deptOptions: [],
      textMap: {
        update: '编辑',
        create: '创建'
      },
      editFormRules: {
        name: [
          {
            required: true,
            message: '请输入园区名称'
          }
        ],
        address: [
          {
            required: true,
            message: '请选取园区地址'
          }
        ]
      },
      //编辑界面数据
      editForm: {}
    }
  },
  watch: {
    map() {
      this.pickup()
    }
  },
  computed: {},
  methods: {
    pickup() {
      console.log(this.map)
      if (this.map.pname != undefined) {
        this.editForm.address =
          this.map.pname +
          this.map.cityname +
          this.map.adname +
          this.map.address +
          this.map.name
        this.editForm.latitude = this.map.location.lat
        this.editForm.longitude = this.map.location.lng
        this.editForm.pcode = this.map.pcode
        this.editForm.citycode = this.map.citycode
        this.editForm.adcode = this.map.adcode
      }
    },
    getCommunitys(flag) {
      if (flag) {
        this.page = 1
      }
      let para = {
        params: {
          page: this.page,
          limit: this.pageSize,
          //排序
          orderByField: this.sort.sort,
          isAsc: this.sort.order,
          name: this.filters.name
        }
      }
      this.listLoading = true
      request.get(this.url.list, para).then(res => {
        this.total = res.data.total
        var datas = res.data.records
        this.communitys = datas
        this.listLoading = false
      })
    },
    handleSortChange(sort) {
      this.sort = {
        sort: sort.prop,
        order: sort.order == 'ascending' ? 'asc' : 'desc'
      }
      this.getCommunitys()
    },
    tableRowClassName(row, index) {
      //把每一行的索引放进row
      row.index = row.rowIndex
    },
    headStyle({ row, rowIndex }) {
      return 'table_head_style'
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index
    },
    handleCurrentChange(val) {
      this.page = val
      this.getCommunitys()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.getCommunitys()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    resetSearchForm(forName) {
      this.filters = {
        name: ''
      }
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          let para = {
            id: row.id
          }
          request
            .get(this.url.del, {
              params: para
            })
            .then(res => {
              this.listLoading = false
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500
              })
              this.getCommunitys()
            })
        })
        .catch(() => {})
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.dialogStatus = 'update'
      this.editFormVisible = true
      this.editForm = Object.assign({}, row)
    },
    //显示新增界面
    handleAdd: function() {
      this.dialogStatus = 'create'
      this.editFormVisible = true
      this.editForm = { companyNumber: 0 }
      this.formFile = {}
    },
    //编辑
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true
            let para = Object.assign({}, this.editForm)
            request.post(this.url.edit, para).then(res => {
              this.editLoading = false
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1500
              })
              this.$refs['editForm'].resetFields()
              this.editFormVisible = false
              this.getCommunitys()
            })
          })
        } // if(valid)结束
      })
    },
    //新增
    addSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.editLoading = true
          request.post(this.url.save, this.editForm).then(res => {
            this.editLoading = false
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1500
            })
            this.$refs['editForm'].resetFields()
            this.editFormVisible = false
            this.getCommunitys()
          })
        }
      }) // if(valid)结束
    },
    selsChange: function(sels) {
      this.sels = sels
    },
    //批量删除
    batchRemove: function() {
      var ids = this.sels.map(item => item.id).toString()
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          let para = {
            ids: ids
          }
          request
            .get(this.url.batchDel, {
              params: para
            })
            .then(res => {
              this.listLoading = false
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500
              })
              this.getCommunitys()
            })
        })
        .catch(() => {})
    },
    //初始化数据字典
    initDictsData: function() {},

    querySearch(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    handleIconClick(ev) {
      console.log(ev)
    }
  },
  mounted() {
    this.initDictsData()
    this.getCommunitys()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  created() {
    //this.smsWarnFlag = this.permissions['sys_user_smswarn']
  }
}
</script>